<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>

<link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.css" rel="stylesheet">    <!-- 引入 layui.css -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js"></script><!-- 引入 layui.js -->


<link type="text/css" rel="styleSheet"  href="./static/css/login.css" /><!-- 引入 login.css -->

<script>
    layui.use(['form','element','layer','jquery'], function(){
  var element = layui.element;
  var form = layui.form;
  var $ = layui.jquery;
  $(function(){
    // 立即触发
    
  })
  form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
    if(value === 'xxx'){
      alert('用户名不能为敏感词');
      return true;
    }
  }
  
  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,passverify:function(value, item){
    if( ! /^\w+$/.test(value) ){
        return '只能输入数字和字母'
    }
    if(!/^[A-Za-z0-9]{6,16}$/.test(value)){
        return '密码必须6到16位，且不能出现空格'
    }
  }
  ,newpassverify:function(value, item){
    if( ! /^\w+$/.test(value) ){
        return '只能输入数字和字母'
    }
    if(!/^[A-Za-z0-9]{6,16}$/.test(value)){
        return '密码必须6到16位，且不能出现空格'
    }
    console.log(item)
    if($("#password").val() !== value ){
        return '确认密码不一致'

    }
  }
});
  //提交
  form.on('submit(findsave)', function(data){
        layer.msg(JSON.stringify(data.field));
        console.log(data)
        let dataform = data.field;

        return false;
      });
});

    </script>
</head>
<body>
    <div id="login" class="findpassword">
     <form class="layui-form layui-form-pane" action="">
        <div class="login-content">
            <div class="login-title">
                <img class="login--title-img" src="./static/img/login-title-icon.png" alt="">
                <div class="login-title-text">合生盈科CRM系统</div>
            </div>
            <div style="padding: 10px 0;">密码找回</div>
            <div class="input-form">
                <div class="layui-form-item findpassword-form-item">
                    <label class="layui-form-label">+86</label>
                      <input type="text" name="phone" id="phone" required  lay-verify="required|phone|number" placeholder="11位手机号" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-item">
                      <input type="password" name="password" id="password"  required  lay-verify="required|passverify"  placeholder="6-16位密码 区分大小写" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-item">
                    <input type="password" name="newpassword" id="newpassword" required  lay-verify="required|newpassverify" placeholder="确认密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item findpassword-form-item">
                    <input type="text" name="code" id="code" placeholder="输入验证码" autocomplete="off" class="layui-input">
                    <div class="code-btn"><button type="button" class="layui-btn layui-btn-primary">获取验证码</button></div>
                </div>
            </div>
                 <!-- 登录按钮 -->
             <div class="foot-form-item">
                 <button class="layui-btn layui-btn-normal findpassword-btn" lay-submit lay-filter="findsave">确定</button>
                 <!-- <div class="save-tip" onclick="gologin()">使用已有帐户登录</div> -->
                 <a href="login.html" class="save-tip">使用已有帐户登录</a>
             </div>

        </div>
    </form>
    </div>
</body>
</html>